<template>
  <div>
    <div class="header">
      <div class="header-content">
        <div class="into-class">
          <div>
            <i class="el-icon-s-fold three-hen"></i>
          </div>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path:'/main' }">我的课堂</el-breadcrumb-item>
            <el-breadcrumb-item>课堂内容</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="user-center">
        <span title="任务管理" class="task">
          <i class="el-icon-s-claim"></i>
        </span>
          <el-popover
              popper-class="area_popper"
              placement="bottom-start"
              trigger="click"
          >
            <div class="notice">
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="全部" name="first"></el-tab-pane>
                <el-tab-pane label="教学活动" name="second"></el-tab-pane>
                <el-tab-pane label="教务通知" name="third"></el-tab-pane>
                <el-tab-pane label="系统通知" name="fourth"></el-tab-pane>
              </el-tabs>
              <div class="notice-foot">
                <div class="btn">
                  <i class="el-icon-check"></i>
                  <el-button type="text">一键标为已读</el-button>
                </div>
                <div class="btn">
                  <i class="el-icon-view"></i>
                  <el-button type="text">查看全部</el-button>
                </div>
              </div>
            </div>
            <div slot="reference"><i class="el-icon-bell new"></i></div>
          </el-popover>
          <el-dropdown @command="handleCommand" trigger="click">
            <div><img src="../assets/img/other/user.png" alt="ha"></div>
            <el-dropdown-menu>
              <el-dropdown-item command="a"><i class="el-icon-bank-card"></i>开通VIP</el-dropdown-item>
              <el-dropdown-item command="b"><i class="el-icon-link"></i>机构用户认证</el-dropdown-item>
              <el-dropdown-item command="c"><i class="el-icon-setting"></i> 个人设置</el-dropdown-item>
              <el-dropdown-item command="d"><i class="el-icon-right"></i> 退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
    <div class="class-main">
      <div class="main-head">
        <img :src="information.backgroundImage" alt="ha">
        <div class="head-top">
          <div class="left">
            <h1>{{ information.courseName }}</h1>
            <h2>{{ information.studyClass }}</h2>
            <div class="code">
              <div class="small-code">
                <!--                <img src="../assets/img/main/qrcode.png" alt="ha">-->
                <i class="el-icon-erweima"></i>
                <p class="class-code">加课码 {{ information.courseCode }}</p>
              </div>
              <div class="member">已有{{ information.courseNumber }}人加入</div>
            </div>
          </div>
          <div class="right" v-if="role === 'student'">
            <div class="no-course">
              <el-button class="no-course-bt" type="info" plain disabled>
                <i class="el-icon-video-play play"></i>暂无课堂
              </el-button>
            </div>
          </div>
          <div class="right" v-else>
            <div>
              <span class="item"><i class="el-icon-setting"></i>课程设置</span>
              <span class="item"><i class="el-icon-edit-outline">课堂评价</i> </span>
              <span class="item"><i class="el-icon-document-copy">课堂评价</i> </span>
              <span class="item" @click="checkMembers" style="cursor: pointer;"><i class="el-icon-chengyuanguanli">成员管理</i> </span>
              <span class="item"><i class="el-icon-pifu">更换皮肤</i> </span>
            </div>
            <div class="have-course">
              <span class="view"><i class="el-icon-view"></i>学生视角</span>
              <span class="share"><i class="el-icon-fenxiang2">分享&评审</i></span>
              <el-button class="have-course-bt">
                <i class="el-icon-video-play play" style="margin-right: 10px;"></i>开始上课
              </el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="head-bottom">
        <div class="course-all">
          <div class="course-item" v-for="(item,index) in courseItem" :key="index"
               :class="{ active : active === index }" @click="choose(index)">{{ item }}
          </div>
        </div>
      </div>
      <router-view></router-view>
      <router-view name="studentAnalysis"></router-view>
      <router-view name="gradeManage"></router-view>
      <router-view name="courseIntroduce"></router-view>
    </div>

<el-dialog title="成员管理" :visible.sync="dialogVisible" width="50%" style="font-size: 20px;height: 800px">
  <div class="member-manage-box">

<div class="sidebar">
<el-button style="margin-left: 20px;margin-bottom: 20px;" @click = "checkTeacher()">教师团队</el-button>
<el-button style="margin-left: 20px" @click = "checkStudent()">全部学生</el-button>
</div>

    <el-table
        :data="tableData"
        style="width: 100%"
    v-if="id === 'teacher'"
    >
      <el-table-column
          prop="name"
          label="教师姓名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="school"
          label="学校"
          width="180">
      </el-table-column>
    </el-table>

    <el-table
        :data="studentData"
        style="width: 100%"
    v-if="id ==='student'"
    >
      <el-table-column
          prop="studentId"
          label="学号"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="school"
          label="学校"
          width="180">
      </el-table-column>
    </el-table>
  </div>
</el-dialog>

  </div>
</template>

<script>

import {mapState} from "vuex";

export default {
  data() {
    return {
      // information: '',
      role: '',
      activeIndex: '1',
      activeName: 'first',
      active: 0,
      courseItem: ["课程学习", "学情分析", "成绩管理", "课程介绍"],
      courseRouterFor: ["courseContent", "studentAnalysis", "gradeManage", "courseIntroduce"],
      dialogVisible: false,
      tableData: [],
      studentData: [],
      id: "teacher"
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleCommand(command) {
      console.log(command)
      if (command === "d") {
        localStorage.removeItem("token")
        localStorage.removeItem("role")
        this.jumpToHome()
      }
    },
    handlePopState() {
      this.$bus.$emit('isinClass', true)
    },
    choose(index) {
      this.active = index
      switch (index) {
        case 0:
          this.$router.push({name: 'defaultView'});
          this.$store.commit("courseInformation/setCourseCode", {
            courseCode: this.information.courseCode,
          })
          break;
        case 1:
          this.$router.push({name: 'studentAnalysis'});
          break;
        case 2:
          this.$router.push({name: 'gradeManage'});
          break;
        case 3:
          this.$router.push({name: 'courseIntroduce'});
          break;
        default:
          console.log("error")
      }
    },
    jumpToHome() {
      this.$router.push('/bigPage/homepage')
    },
    //成员管理
    checkMembers(){
      this.dialogVisible = true
    },
    //查看教师
    checkTeacher(){
      console.log("查看教师")
      this.id = "teacher";
      //通过课程号查询到课程id，再通过课程id查询到教师id，再通过教师id查询到教师姓名和学校
      this.request.get("/getCourseIdByCode?courseCode=" + this.information.courseCode).then(res => {
        console.log(res)
        this.tableData = res
      }).catch(err => {
        console.log(err)
      })

    },
    //查看学生
    checkStudent(){
      this.id = "student";
      //通过课程号查询到课程id，再通过课程id查询到学生id，再通过学生id查询到学生学号、姓名和学校
      this.request.get("/getCourseIdByCodeForStudent?courseCode=" + this.information.courseCode).then(res => {
      console.log(res)
        this.studentData = res
      }).catch(err => {
        console.log(err)
      })
    },

  },
  mounted() {
    this.role = localStorage.getItem("role");
    this.$store.commit("courseInformation/setCourseCode", {
      courseCode: this.information.courseCode,
    })
  },
  computed: {...mapState({information: state => state.courseInformation.course})}
}
</script>

<style scoped>
.header {
  height: 80px;
  width: 100%;
  margin-bottom: 16px;
  box-sizing: border-box;
  box-shadow: 0 0 10px #ccc;
}

.header-content {
  position: fixed;
  background-color: #fff;
  z-index: 999;
  top: 0;
  left: 0;
  height: 80px;
  width: 100%;
  padding: 0 40px;
  min-width: 900px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 1px 0 0 #dfdfdf;
}

.user-center {
  display: flex;
  align-items: center;
}

.task {
  cursor: pointer;
  margin-right: 18px;
  position: relative;
}

.task i {
  font-size: 30px;
}

.new {
  font-size: 30px;
  margin-right: 18px;
}

.user-center img {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

::v-deep .el-menu-item {
  font-size: 21px;
  padding: 0;
}

::v-deep .el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 3px solid #409EFF;
}

::v-deep .el-menu--horizontal > .el-menu-item {
  padding: 10px 0;
  margin: 0 35px;
  height: 80px;
}

::v-deep .el-menu.el-menu--horizontal {
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-width: 0;
}

.notice {
  margin-top: 10px;
  padding: 0 45px;
}

::v-deep .el-tabs__item {
  font-size: 21px;
  padding: 0 25px;
  height: 50px;
}

::v-deep .el-tabs__active-bar {
  height: 3px;
}

.notice-foot {
  margin-top: 30px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  color: #4285f4;
  line-height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.btn {
  font-size: 18px;
  cursor: pointer;
  width: 50%;
  height: 50px;
  line-height: 50px;
}

.btn i {
  margin-right: 8px;
}

.btn > .el-button {
  font-size: 18px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}

::v-deep .el-dropdown-menu__item {
  font-size: 16px;
  line-height: 55px;
}

.into-class {
  display: flex;
  justify-content: space-between;
}

.three-hen {
  font-size: 27px;
  margin-right: 60px;
}

::v-deep .el-breadcrumb {
  font-size: 20px;
  margin-top: 3px;
}

::v-deep .el-breadcrumb__inner {
  cursor: pointer;
}

.class-main {
  width: 1586px;
  margin: auto;
}

.main-head {
  position: relative;
  background: #e8f0ff;
  border-radius: 8px 8px 0 0;
  height: 266px;
}

.main-head img {
  border-radius: 8px 8px 0 0;
  width: 100%;
  height: 266px;
  background-color: #3367d5;
}

.head-top {
  position: absolute;
  width: 100%;
  height: 266px;
  left: 0;
  top: 0;
  padding: 35px;
  color: #fff;
  display: flex;
}

.head-top > .left {
  flex: 1;
}

.head-top h1 {
  text-align: left;
  font-size: 40px;
  font-weight: 400;
}

.head-top h2 {
  margin-top: 10px;
  font-size: 24px;
  line-height: 39px;
  font-weight: 400;
}

.code {
  margin-top: 65px;
  font-size: 18px;
  font-weight: 400;
  display: flex;
  align-items: center;
}

.small-code {
  display: flex;
  cursor: pointer;
  margin-right: 16px;
}

.small-code i {
  margin-right: 10px;
  width: 20px;
  height: 20px;
  font-size: 30px;
}

.member {
  cursor: pointer;
}

.right {
  display: flex;
  flex-direction: column;
  font-size: 14px;
}

.no-course {
  display: block;
  margin-left: 208px;
  /* position: absolute; */
  /* right: 24px; */
  /* left: 20px; */
  /* bottom: 24px; */
  margin-top: 160px;
}

.no-course-bt {
  border-radius: 20px;
  font-size: 20px;
}

.no-course .play {
  padding-right: 5px;
}

.head-bottom {
  display: flex;
  align-items: center;
  width: 100%;
  height: 88px;
  color: #3c4043;
  font-size: 14px;
  font-weight: 400;
  justify-content: center;
  background: #fff;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
}

.course-all {
  display: flex;
  align-items: center;
}

.course-item {
  cursor: pointer;
  height: 40px;
  line-height: 40px;
  margin: 0 28px;
  text-align: center;
  font-size: 28px;
  padding-left: 5px;
  padding-right: 5px;
}

.active {
  background: #e8f0ff;
  color: #4285f4;
  border-radius: 10px;
}

.item {
  margin-left: 5px;
  font-size: 20px;
}

.item i {
  padding-left: 5px;
}

.have-course {
  position: absolute;
  right: 24px;
  bottom: 24px;
  font-size: 18px;
}

.have-course .view {
  cursor: pointer;
  margin-right: 20px;
  outline: none;
}

.have-course .share {
  cursor: pointer;
  outline: none;
}

.have-course-bt {
  font-size: 19px;
  color: #ff6000;
  margin-left: 24px;
  min-width: 120px;
  padding: 15px 30px;
  border-radius: 25px;
}
.member-manage-box{
  display: flex;
}
.sidebar{
  width: 25%;
  /*height: 100%;*/
  /*background-color: #4285f4;*/
}
.button-row{
 font-size: 15px;
  text-align: center;
  margin: 20px 0;
}
.el-row:hover{
  cursor: pointer;
}
.main-member{
  margin-left: 10%;
}
</style>
